<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>事件的基本使用</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
    <!--
    事件的基本使用：
    1.使用 或者 绑定事件，其中XXX是事件名
    2.时间的回调需要配置在methods对象中，但最会在vm上
    3.methods中配置的函数，不要使用箭头函数,否则,this就不是VM了
            showInfo1:(event)=>{
                console.log(this),
                    alert("同学你好！")
            }
    4.methods中配置的函数，都是被Vue所管理的函数，this的指向是VM或者组件实例对象
    5.@click=“demo”和@click=“demo($event)”的效果是一致的，但后者可以传参
     -->

    <button v-on:click="showInfo1">点我提示信息1(不传参)</button>

    <button @click="showInfo1">点我提示信息1(不传参)</button>
    <button @click="showInfo2($event,66)">点我提示信息2(传参)</button>
</div>


</body>
<script type="text/javascript">
    Vue.config.productionTip =false
    new Vue({
        el:"#root",
        data:{
            name: "尚硅谷",
            url: 'http://www.baidu.com'
        },
        methods:{
            showInfo1:(event)=>{
                alert("同学你好！")
            },

            showInfo2(event,number){
                console.log(this),
                alert("同学你好！！"+number,)
            }
        }
    })
</script>

</html>
